<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="../../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/proList.css"/>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div class="head">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a href="index"><img src="../../img/temp/logo2.png"/></a></h1>
					<div class="fr clearfix" id="top1">
						<p class="fl"  th:if="${session.username==null}">
							<a href="login" id="login">登录</a>
							<a href="reg" id="reg">注册</a>
						</p>
						<p class="fl" th:unless="${session.username==null}">
							<a ><span type="text" id="username"></span></a>
						</p>
						<form th:action="@{/front/search}" th:method="post" enctype="multipart/form-data" class="fl">
							<input type="text" th:id="search" th:name="search" placeholder="搜索" />
							<input type="submit" value=""/>
						</form>
						<div class="btn fl clearfix">
							<a th:href="@{/front/mygxin}"><img src="../../img/grzx.png"/></a>
							<a href="#" class="er1"><img src="../../img/ewm.png"/></a>
							<a th:href="@{/front/cart}"><img src="../../img/gwc.png"/></a>
							<p><a href="#"><img src="../../img/smewm.png"/></a></p>
						</div>
					</div>
				</div>
				<ul class="clearfix" id="bott">
					<li><a th:href="@{/front/index}">首页</a></li>
					<li>
						<a href="#">所有商品</a>
						<div class="sList">
							<div class="wrapper  clearfix">
								<a th:each="category,categoryStat:${category}" th:href="@{/front/getcategory(categoryId=${category.categoryId},sort=99)}">
									<dl>
										<dt><img th:src="@{'/files/test/pic/'+${category.photo}}"/></dt>
										<dd th:text="${category.name}"></dd>
									</dl>
								</a>
							</div>
						</div>
					</li>
					<li th:each="category,categoryStat:${category}">
						<a th:href="@{/front/getcategory(categoryId=${category.categoryId},sort=99)}">
							<span th:text="${category.name}"></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!-----------------address------------------------------->
		<div class="address">
			<div class="wrapper clearfix">
				<a th:href="@{/front/index}">首页</a>
				<span>/</span>
				<a href="#" class="on">【[[${productdetail.name}]]】</a>
			</div>
		</div>
		<!-----------------------Detail------------------------------>
		<div class="detCon">
			<div class="proDet wrapper">
				<div class="proCon clearfix">
					<div class="proImg fl">
						<img class="det" th:src="@{'/files/test/pic/'+${productdetail.photo}}"/>
					</div>
					<div class="fr intro">
						<div class="title">
							<h4 th:text="${productdetail.name}">【最家】非洲菊仿真花干花</h4>
							<p>【破损补寄】【[[${productdetail.description}]]】【无理由退换货】【包邮】</p>
							<span >￥[[${productdetail.getPrice()}]]</span>
						</div>
						<div class="proIntro">
							<p>颜色分类</p>
							<div class="smallImg clearfix categ" style="display: none">
								<p class="fl"><img src="../../img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="../../img/temp/proBig01.jpg"></p>
								<p class="fl"><img src="../../img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="../../img/temp/proBig02.jpg"></p>
								<p class="fl"><img src="../../img/temp/prosmall03.jpg" alt="20支快乐花" data-src="../../img/temp/proBig03.jpg"></p>
								<p class="fl"><img src="../../img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="../../img/temp/proBig04.jpg"></p>
							</div>
							<p>数量&nbsp;&nbsp;库存<span th:text="${productdetail.getAmount()}" id="stock">2096</span>件</p>
							<div class="num clearfix">
								<img class="fl sub" src="../../img/temp/sub.jpg">
								<span class="fl" contentEditable="true" id="quantity" >1</span>
								<img class="fl add" src="../../img/temp/add.jpg">
<!--								<p class="please fl">请选择商品属性!</p>-->
							</div>
						</div>
						<div class="btns clearfix">
<!--							<a href="#2"><p class="buy fl">立即购买</p></a>-->
							<a href="#" th:onclick="'buyNow('+${productdetail.productId}+')'" ><p class="buy fl" id="buyNow">立即购买</p></a>
<!--							<a href="#2"><p class="cart fr">加入购物车</p></a>-->
							<a href="#" id="saveToCart" th:onclick="'saveToCart('+${productdetail.productId}+')'" ><p class="cart fr">加入购物车</p></a>
<!--							<input type="button" value="加入购物车" th:onclick="'saveToCart('+${productdetail.getProductId()}+')'" class="cart fr"/>-->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="introMsg wrapper clearfix">
			<div class="msgL fl">
				<div class="msgTit clearfix">
					<a class="on">商品详情</a>
					<a>所有评价</a>
				</div>
				<div class="msgAll">
					<div class="msgImgs">
						<img src="../../img/temp/det01.jpg">
						<img src="../../img/temp/det02.jpg">
						<img src="../../img/temp/det03.jpg">
						<img src="../../img/temp/det04.jpg">
						<img src="../../img/temp/det05.jpg">
						<img src="../../img/temp/det06.jpg">
						<img src="../../img/temp/det07.jpg">
					</div>
					<div class="eva">
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="../../img/temp/eva01.jpg"></p>
									<p><img src="../../img/temp/eva02.jpg"></p>
									<p><img src="../../img/temp/eva03.jpg"></p>
									<p><img src="../../img/temp/eva04.jpg"></p>
									<p><img src="../../img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="../../img/temp/eva01.jpg"></p>
									<p><img src="../../img/temp/eva02.jpg"></p>
									<p><img src="../../img/temp/eva03.jpg"></p>
									<p><img src="../../img/temp/eva04.jpg"></p>
									<p><img src="../../img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="../../img/temp/eva01.jpg"></p>
									<p><img src="../../img/temp/eva02.jpg"></p>
									<p><img src="../../img/temp/eva03.jpg"></p>
									<p><img src="../../img/temp/eva04.jpg"></p>
									<p><img src="../../img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="../../img/temp/eva01.jpg"></p>
									<p><img src="../../img/temp/eva02.jpg"></p>
									<p><img src="../../img/temp/eva03.jpg"></p>
									<p><img src="../../img/temp/eva04.jpg"></p>
									<p><img src="../../img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per01.jpg">
							<div class="perR fl">
								<p>馨***呀</p>
								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p>
								<div class="clearfix">
									<p><img src="../../img/temp/eva01.jpg"></p>
									<p><img src="../../img/temp/eva02.jpg"></p>
									<p><img src="../../img/temp/eva03.jpg"></p>
									<p><img src="../../img/temp/eva04.jpg"></p>
									<p><img src="../../img/temp/eva05.jpg"></p>
								</div>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
						<div class="per clearfix">
							<img class="fl" src="../../img/temp/per02.jpg">
							<div class="perR fl">
								<p>么***周</p>
								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
								<p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="msgR fr">
				<h4>为你推荐</h4>
				<div class="seeList">
					<a href="#">
						<dl>
							<dt><img src="../../img/temp/see01.jpg"></dt>
							<dd>【最家】复古文艺风玻璃花瓶</dd>
							<dd>￥193.20</dd>
						</dl>
					</a>
					<a href="#">
						<dl>
							<dt><img src="../../img/temp/see02.jpg"></dt>
							<dd>【最家】复古文艺风玻璃花瓶</dd>
							<dd>￥193.20</dd>
						</dl>
					</a>
					<a href="#">
						<dl>
							<dt><img src="../../img/temp/see03.jpg"></dt>
							<dd>【最家】复古文艺风玻璃花瓶</dd>
							<dd>￥193.20</dd>
						</dl>
					</a>
					<a href="#">
						<dl>
							<dt><img src="../../img/temp/see04.jpg"></dt>
							<dd>【最家】复古文艺风玻璃花瓶</dd>
							<dd>￥193.20</dd>
						</dl>
					</a>
				</div>
				
			</div>
		</div>
		<div class="like">
			<h4>猜你喜欢</h4>
			<div class="bottom">
				<div class="hd">
					<span class="prev"><img src="../../img/temp/prev.png"></span>
					<span class="next"><img src="../../img/temp/next.png"></span>
				</div>
				<div class="imgCon bd">
					<div class="likeList clearfix">
						<div>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like01.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like02.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like03.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like04.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail" class="last">
								<dl>
									<dt><img src="../../img/temp/like05.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
						</div>
						<div>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like01.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like02.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like03.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail">
								<dl>
									<dt><img src="../../img/temp/like04.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail" class="last">
								<dl>
									<dt><img src="../../img/temp/like05.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div th:replace="~{front/public/gotop::endbar}"></div>

		<div class="msk"></div>
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<script src="../../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/cart.js" type="text/javascript" charset="utf-8"></script>
<!--		<script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>-->
		<script type="text/javascript" src="../../js/sweetalert.min.js"></script>

		<script type="text/javascript">
			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
		</script>

	<script type="text/javascript">
		$(document).ready(function () {
			$.ajax({
				url: "/getUserInfo",
				type: "GET",
				dataType: "json",
				success: function(json) {
					if (json.state == 200) {
						console.log("username=" + json.data.username);
						console.log("email=" + json.data.email);
						$("#username").val(json.data.username);
						$("#email").val(json.data.email);
						$("#username").text('欢迎您！'+json.data.username)

					} else {
						alert("获取用户信息失败！" + json.message);
					}
				}
			});
		});


		/**
		 * 添加到购物车
		 */
		function saveToCart(productId) {
			// var quantity = 1;
			var quantity = $('#quantity').text();
			var quantityInt=parseInt(quantity);
			//库存量
			var stock = $('#stock').text();
			var stockInt=parseInt(stock);
			if (stockInt<=0 ){
				swal({
					title: '温馨提示',
					icon: 'warning',
					text: '库存数量不足,无法购买',
					button: {
						text: "确认",
						value: true,
					}
				}).then(function (isok) {
					if (isok) {
						location.reload();
					}
				})
				return false;
			}
			if (quantityInt>stockInt){
				swal({
					title: '温馨提示',
					icon: 'warning',
					text: '所选数量超过商品库存，请重新选择',
					button: {
						text: "确认",
						value: true,
					}
				}).then(function (isok) {
					if (isok) {
						location.reload();
					}
				})
				return false;
			}



			console.log(quantity);
			var data = {
				"productId": productId,
				"quantity": quantity
			};
			$.ajax({
				type: 'POST',
				url: '/shop-cart',
				contentType: 'application/json',
				data: JSON.stringify(data),
				success: function (result) {
					if (result.code == 1) {
						console.log("进来了吗")
						swal({
							title: "添加成功",
							icon: "success",
						}).then((flag) => {
									window.location.reload();
								}
						);
					} else {
						swal(result.message, {
							icon: "error",
						});
					}
				},
				error: function () {
					swal("操作失败l", {
						icon: "error",
					});
				}
			});
		}
	//	点击立即购买
		function buyNow(productId){
			var quantity = $('#quantity').text();
			var quantityInt=parseInt(quantity);
			//库存量
			var stock = $('#stock').text();
			var stockInt=parseInt(stock);
			console.log('选择的商品数目：'+quantity);
			console.log('库存数目：'+stock);
			if (stockInt<=0 ){
				swal({
					title: '温馨提示',
					icon: 'warning',
					text: '库存数量不足,无法购买',
					button: {
						text: "确认",
						value: true,
					}
				}).then(function (isok) {
					if (isok) {
						location.reload();
					}
				})
				return false;
			}

			if (quantityInt>stockInt){
				swal({
					title: '温馨提示',
					icon: 'warning',
					text: '所选数量超过商品库存，请重新选择',
					button: {
						text: "确认",
						value: true,
					}
				}).then(function (isok) {
					if (isok) {
						location.reload();
					}
				})
				return false;
			}
			console.log(quantity);
			var data = {
				"productId": productId,
				"quantity": quantity
			};
			$.ajax({
				type: 'POST',
				url: '/front/buyNow',
				contentType: 'application/json',
				data: JSON.stringify(data),
				success: function (result) {
					if (result.code == 1) {
						console.log("进来了吗")
						location.href='/front/orderNow'
					} else {
						swal(result.message, {
							icon: "error",
						});
					}
				},
				error: function () {
					swal("操作失败l", {
						icon: "error",
					});
				}
			});
		}



	</script>
	</body>
</html>
